import {Button, Input} from "antd";
import styles from "./auth.module.scss";

import {useNavigate} from "react-router-dom";
import {useAccessStore} from "../../store/access";
import ChatGPTIcon from "../../icons/chatgpt.svg";

export function Auth() {
    const navigate = useNavigate();
    const access = useAccessStore();

    return (
        <div className={styles["auth-page"]}>
            <ChatGPTIcon/>
            <div className={styles["auth-title"]}>OpenAIhub</div>
            <div className={styles["auth-sub-title"]}>
                学习AI开发、掌握AI部署、运用AI提效
            </div>
            <img
                src="/head.jpg"
                style={{width: 250}}
            />
            <div className={styles["auth-tips"]}>
                扫码关注公众号【淘个征途】,
                <a
                    href="/qrcode.jpg"
                    target="_blank"
                >
                    回复【101】获取访问密码
                </a>
            </div>
            <Input
                className={styles["auth-input"]}
                type="password"
                placeholder="请在输入访问密码"
                value={access.accessCode}
                onChange={(e) => {
                    access.updateCode(e.currentTarget.value);
                }}
                status={access.accessCodeErrorMsgs ? 'error' : ''}
            />
            {access.accessCodeErrorMsgs ?
                <span className={styles["auth-error"]}>{access.accessCodeErrorMsgs}</span> : null}

            <div className={styles["auth-actions"]}>
                <Button type="primary" onClick={() => access.login()}>确认登录👣</Button>
                <Button type="text">稍后再说</Button>
            </div>
            <span>说明：此平台服务生成的所有内容均由人工智能模型生成，其生成内容的准确性和完整性无法保证，不代表我们的态度或观点</span>
        </div>
    )
}